<%@page contentType="text/html; charset=utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="${basePath}css/styles.css" />
<link rel="stylesheet"
	href="${basePath}css/font-awesome-4.7.0/css/font-awesome.min.css" />
<script src="${basePath}js/jquery-3.6.0.js" type="text/javascript"></script>
<script src="${basePath}js/echarts.min.js" type="text/javascript"></script>
<script
	src="${basePath}js/jquery-validation-1.14.0/localization/messages_zh.js"
	type="text/javascript"></script>
</head>
<body style="height: 100%; margin: 0">
	<div class="main-content">


		<div class="echart-box">

			<div id="main1" style="width: 800px; height: 400px;"></div>
			<div id="main2" style="width: 800px; height: 400px;"></div>

		</div>




	</div>
</body>
<script type="text/javascript">
	$(document).ready(function() {
		$.post("${basePath}/echartBar", {}, function(data, status) {
			var jsonArray = JSON.parse(data);
			var xArr = [];
			var yArr = [];
			for (var i = 0; i < jsonArray.length; i++) {
				var obj = jsonArray[i];
				xArr.push(obj.xinghao);
				yArr.push(obj.num);
			}
			const myChart = echarts.init(document.getElementById('main1'));
			// 指定图表的配置项和数据
			var option = {
				title : {
					text : 'gdzc柱状图'
				},
				tooltip : {},
				legend : {
					data : [ '数值' ]
				},
				xAxis : {
					data : xArr,
				/* axisLabel : {
					interval : 0
				} */
				},
				yAxis : {},
				series : [ {
					name : '数值',
					type : 'bar',
					data : yArr
				} ]
			};

			myChart.setOption(option);
		});

		/*  var myChart = echarts.init(document.getElementById('main2'));
		myChart.setOption({
		    series : [
		        {
		            name: '访问来源',
		            type: 'pie',    // 设置图表类型为饼图
		            radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
		            data:[          // 数据数组，name 为数据项名称，value 为数据项值
		                {value:235, name:'视频广告'},
		                {value:274, name:'联盟广告'},
		                {value:310, name:'邮件营销'},
		                {value:335, name:'直接访问'},
		                {value:400, name:'搜索引擎'}
		            ]
		        }
		    ]
		}) */

		$.post("${basePath}/echartPin", {}, function(data, status) {
			var jsonArray = JSON.parse(data);
			var itemArr = [];
			for (var i = 0; i < jsonArray.length; i++) {
				var obj = jsonArray[i];
				itemArr.push({
					value : parseInt(obj.num),
					name : obj.xinghao
				});
			}
			const myChart2 = echarts.init(document.getElementById('main2'));
			myChart2.setOption({
				series : [ {
					name : 'wbw饼图',
					type : 'pie', // 设置图表类型为饼图
					radius : '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
					data : itemArr
				// 数据数组，name 为数据项名称，value 为数据项值
				} ],
				title : {
					text : 'wbw饼图'
				},
			})
		});

	});
</script>
</html>